昨天我們提到HTML的<a>元素，以及怎麼用它在網頁中加上連結。也說明這些連結不一定都是連到網頁，實際在網頁中也不一定都是以文字來呈現。

今天要介紹怎麼在網頁中加入清單，方便整理我們的資料～

HTML中的清單主要有三種。
一種是由項目符號（bullet）組成的無序清單（或說是項目清單），一種是由數字或字母等有次序的編號組成的有序清單（或說是編號清單）。還有一種是沒有符號或編號，只由文字組成的描述清單。

無序清單

如果要列舉的各個項目之間沒有一定順序，可以用無序清單。

HTML的無序清單，由<ul>跟<li>兩種元素構成。<ul>的名稱指的是unordered list。而<li>的名稱則代表list item。[1]

建立無序清單時，需同時搭配使用這兩種元素。下列的範例中，先以<ul>元素表示這是一個無序清單，接著在<ul>裡頭以<li>表示要列舉的各個項目。

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ul>

變更項目符號的種類

通常無序清單的項目符號會是實心的小圓圈，但也可以透過<ul>或<li>的type屬性設定為其他種類的符號。

不過目前通常會另外以CSS來設定清單樣式。如果都沒有另外做設定的話，瀏覽器會根據項目所在層級自動選擇要用哪種項目符號。[1]

如果是在<ul>設定，清單中的所有項目都會使用指定的項目符號；如果是在<li>設定，就只會套用到<li>代表的那個項目；如果兩個元素都有設定，則會使用代表該項目的<li>所指定的項目符號。

以下幾種type屬性值對應到不同類型的項目符號：

• disc：實心圓圈（預設值）
• circle：空心圓圈
• square：方塊

有序清單

如果項目之間有一定順序，像是食譜上的步驟，無法隨意更動順序，就需要使用有序清單來列舉。

HTML的有序清單，由<ol>跟<li>兩種元素構成。<ol>的名稱指的是ordered list。而<li>的名稱則代表list item。[2]

建立有序清單時，需同時搭配使用這兩種元素。先以<ol>元素表示這是一個有序清單，接著在<ol>裡頭放入以<li>表示的各個項目。

以下範例便透過<ol>跟<li>元素建立有序清單，列舉目前前端迷走中：從零開始的新手之路發表過的文章：

<ol>
  <li>[Day 01] 前言──沒有在跟你立flag的</li>
  <li>[Day 02] 嗨，HTML──網頁的基本組成</li>
  <li>[Day 03] 嗚咿咿啊咿──淺談HTML的語法</li>
  <li>[Day 04] 看不見的頭──HTML的&lt;head&gt;裡裝了什麼？</li>
  <li>[Day 05] 寫不出來先排版──HTML文字編排入門</li>
  <li>[Day 06] 幫網頁劃出界線──HTML的語意化結構元素</li>
  <li>[Day 07] 網頁也要分章節──續談HTML語意化結構元素</li>
  <li>[Day 08] 有連結就是讚──HTML的&lt;a&gt;元素</li>
</ol>

反向排序

有時候在列清單時，可能會需要倒過來列舉項目。像是揭露排名時想要營造驚喜，將第一名放在壓軸介紹。這時就可以使用<ol>元素的reversed屬性來達成這個效果。

reversed屬性是布林屬性，只要幫<ol>元素加上reversed屬性，就會讓有序清單變成反向排序。

以下由規範提供的範例中，用<ol>和<li>建立有序清單列舉排行前十名的電影，並透過reversed屬性讓清單反向排序。

<figure>
 <figcaption>The top 10 movies of all time</figcaption>
 <ol reversed>
  <li><cite>Josie and the Pussycats</cite>, 2001</li>
  <li><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li>
  <li><cite>A Bug's Life</cite>, 1998</li>
  <li><cite>Toy Story</cite>, 1995</li>
  <li><cite>Monsters, Inc</cite>, 2001</li>
  <li><cite>Cars</cite>, 2006</li>
  <li><cite>Toy Story 2</cite>, 1999</li>
  <li><cite>Finding Nemo</cite>, 2003</li>
  <li><cite>The Incredibles</cite>, 2004</li>
  <li><cite>Ratatouille</cite>, 2007</li>
 </ol>
</figure>

更改編號種類

通常有序清單會以阿拉伯數字編號。但其實也有其他種類的編號方式，像是羅馬數字或英文字母。

如果要用其他方式來為清單編號，可以透過設定<ol>或<li>的type屬性來達成，不過目前通常會另外以CSS來設定清單樣式。除非編號的種類有實質意義，像是法律條文的編號方式就需要說明清楚。[2]

需要注意的是，如果是在<ol>設定，會套用到那個清單的所有項目；如果是在<li>設定，就只會套用到<li>代表的那個項目；如果兩個元素都有設定，則項目會優先套用其<li>設定的值。

透過設定type屬性值，有序清單可以使用的編號方式有：

• 1：阿拉伯數字（預設值）
• a：小寫英文字母
• A：大寫英文字母
• i：小寫羅馬數字
• I：大寫羅馬數字

以下由MDN提供的範例中，將type屬性值設為i，讓清單以小寫羅馬數字編號：

<ol type="i">
  <li>Introduction</li>
  <li>List of Grievances</li>
  <li>Conclusion</li>
</ol>

設定編號起始值

若是需要讓有序清單從特定值開始編號，可以透過設定<ol>的start屬性或<li>的value屬性來達成。即便是其他種類的編號方式也是如此。不過兩者的效果有些差別，以下分別說明。

<ol>元素的start屬性

如果是為代表整個清單的<ol>元素設定start屬性，會讓清單中的所有項目都從這個值開始編號。即使以reversed屬性設定為反向排序的清單也是如此，意思是會從這個值倒著算。

<ol>元素的start屬性值需要是整數。[2]

以下範例，便將start的屬性設為10。讓這個列出未來十篇文章的清單，從10開始編號。

<ol start="10">
  <li>[Day 10] 未定～ </li>
  <li>[Day 11] 未定～ </li>
  <li>[Day 12] 未定～ </li>
  <li>[Day 13] 未定～ </li>
  <li>[Day 14] 未定～ </li>
  <li>[Day 15] 未定～ </li>
  <li>[Day 16] 未定～ </li>
  <li>[Day 17] 未定～ </li>
  <li>[Day 18] 未定～ </li>  
  <li>[Day 19] 未定～ </li>   
</ol>

<li>元素的value屬性

如果是為代表項目的<li>元素設定value屬性，則只會讓清單從這個項目開始以特定值來編號。

所以如果是在第一個項目的<li>元素設定value屬性，就可以讓整個清單都從特定值開始編號，類似於<ol>元素的start屬性帶來的效果。以下便將剛才的範例改用value屬性來處理：

<ol>
  <li value="10">[Day 10] 未定～ </li>
  <li>[Day 11] 未定～ </li>
  <li>[Day 12] 未定～ </li>
  <li>[Day 13] 未定～ </li>
  <li>[Day 14] 未定～ </li>
  <li>[Day 15] 未定～ </li>
  <li>[Day 16] 未定～ </li>
  <li>[Day 17] 未定～ </li>
  <li>[Day 18] 未定～ </li>  
  <li>[Day 19] 未定～ </li>   
</ol>

但value屬性只是設定清單從其代表的項目開始以特定值來編號。如果不是在清單中的第一個項目設定value屬性，效果就不同於<ol>元素的start屬性。

也可以同時為清單中的多個項目設定value屬性，這樣清單就會分成不同區段，各自從不同值開始編號。

跟start屬性一樣，value屬性值需要是整數。[3]

在以下的範例中，將整個代表整個清單的<ol>的start屬性設為10，這樣清單就會10開始計算。不過因為又分別為第15天、第25天、第30天的項目設定value屬性值為15、25、30，於是清單就被拆成不同區段。各個區段分別由其指定值開始編號。

<ol start="10">
  <li>[Day 10] 繼續HTML～</li>
  <li>[Day 11] 繼續HTML～</li>
  <li>...</li>

  <li value="15">[Day 15] 開始CSS～</li>
  <li>[Day 16] 開始CSS～</li>
  <li>...</li>

  <li value="25">[Day 25] 未定～</li>
  <li>[Day 26] 未定～</li>
  <li>...</li>

  <li value="30">[Day 30] 結束啦 ^ ^</li>
</ol>

多層清單

有時候在列清單時會分成好幾層，將某個項目進一步劃分成多個項目。

這樣的需求在HTML中也可以做得到。
建立無序清單或有序清單時，我們可以根據需要，將其中的項目變成另一層清單。只要在那個項目的<li>元素裡面，加入代表另一個清單的<ul>或<ol>元素。

而且兩種清單可以交替使用。所以可能在無序清單中放入一個有序清單，或是在有序清單中放入一個無序清單。

以下讓我們分別舉例說明～

無序清單裡放無序清單

在範例中，先以<ul>和<li>建立一個無序清單，包含HTML、CSS、Javascript等技術。在代表這些項目的<li>裡面，又各自加上<ul>和<li>建立第二層無序清單，列出學習這些技術要了解的主題。

<ul>
  <li>
    HTML
    <ul>
      <li>&lt;head&gt;</li>
      <li>&lt;body&gt;</li>
    </ul>
  </li>

  <li>
    CSS
    <ul>
      <li>Grid</li>
      <li>Flexbox</li>
    </ul>
  </li>

  <li>
    Javascript
    <ul>
      <li>Function</li>
      <li>Object</li>
    </ul>
  </li>
</ul>

無序清單裡放有序清單

在範例中，先以<ul>和<li>建立一個無序清單，包含這次鐵人賽的幾個主題。在代表這些題目的<li>裡面，又分別加上<ol>和<li>建立第二層有序清單，列出這些主題在前兩天的文章。

<ul>
  <li>
    程式小白的 30 天轉職挑戰 系列
    <ol>
      <li>Day1｜前言</li>
      <li>Day2｜工程師也要有好的生產力</li>
    </ol>
  </li>

  <li>
    Git 起來！每日一招學起來
    <ol>
      <li>Day 1：從 git add 開始 —— 把東西放進「購物車」</li>
      <li>Day 2：git commit —— 按下結帳鍵，把購物車的東西送進歷史</li>
    </ol>
  </li>

  <li>
    前端迷走中：從零開始的新手之路
    <ol>
      <li>[Day 01] 前言──沒有在跟你立flag的</li>
      <li>[Day 02] 嗨，HTML──網頁的基本組成</li>
    </ol>
  </li>

  <li>
    欸，貓咪你不能去那裡！CSS新手學習之路
    <ol>
      <li>【Day 01】前言～閒聊CSS歷史</li>
      <li>【Day 02】閒聊CSS歷史・續 ～ CSS究竟是什麼？</li>
    </ol>
  </li>
</ul>

有序清單裡放無序清單

在範例中，先以<ol>和<li>建立一個有序清單，列出我在鐵人賽的前三篇文章。在代表這些文章的<li>裡面，又分別加上<ul>和<li>建立第二層無序清單，列出這些文章的主題。

<ol>
  <li>
    [Day 01] 前言──沒有在跟你立flag的
    <ul>
      <li>自我介紹</li>
      <li>主題介紹</li>
    </ul>
  </li>

  <li>
    [Day 02] 嗨，HTML──網頁的基本組成
    <ul>
      <li>&lt;!DOCTYPE html&gt;</li>
      <li>&lt;html&gt;</li>
      <li>&lt;head&gt;</li>
      <li>&lt;body&gt;</li>
    </ul>
  </li>

  <li>
    [Day 03] 嗚咿咿啊咿──淺談HTML的語法
    <ul>
      <li>元素</li>
      <li>屬性</li>
      <li>註解</li>
      <li>其他注意事項</li>
    </ul>
  </li>
</ol>

有序清單裡放有序清單

在範例中，先以<ol>和<li>建立一個有序清單，列出我在鐵人賽的第10篇跟第11篇文章。在代表這些文章的<li>裡面，又分別加上<ol>和<li>建立第二層有序清單，列出撰寫文章的步驟。

<ol start="10">
  <li>
    [Day 10] 未定～
    <ol>
      <li>想題目</li>
      <li>開始寫</li>
      <li>想標題</li>
      <li>上傳～</li>
    </ol>
  </li>

  <li>
    [Day 11] 未定～
    <ol>
      <li>想題目</li>
      <li>開始寫</li>
      <li>想標題</li>
      <li>上傳～</li>
    </ol>
  </li>

描述清單

除了常見的無序跟有序清單，HTML中還有一種描述清單。這種清單跟前面兩種清單不一樣，裡頭的項目沒有符號或編號，就只有元素內容本身的文字而已。

描述清單由<dl>、<dt>跟<dd>等三種元素構成。
<dl>指的是description list，代表描述清單本身[4]；
<dt>指的是description term，代表要被<dd>描述、解釋的術語、問題、資料類別等[5]；
<dd>則表示description Details，代表有關<dt>的描述、定義等[6]。

建立描述清單時，需同時搭配使用這三種元素。先以<dl>元素表示這是一個描述清單。接著在<dl>中，依序放入<dt>與<dd>，將其搭配組合成一組一組的描述、解釋。

以<dd>裝起來的描述、定義等，會縮排顯示，跟代表術語、問題、資料類別等的<dt>有所區別。

常見用途

描述清單通常會來表示定義單字、術語的詞彙表，或用來處理metadata。
用於處理metadata時，有時候會再將每組描述以<div>包起來。[4]（之後會再介紹<div>，這邊先帶過～）

以下由MDN提供的範例中，便以描述清單作為詞彙表，解釋這些神秘生物是什麼。

<p>Cryptids of Cornwall:</p>

<dl>
  <dt>Beast of Bodmin</dt>
  <dd>A large feline inhabiting Bodmin Moor.</dd>

  <dt>Morgawr</dt>
  <dd>A sea serpent.</dd>

  <dt>Owlman</dt>
  <dd>A giant owl-like creature.</dd>
</dl>

在MDN提供的另一個例子中，則將描述清單用於顯示有關哥吉拉的metadata，將這些資料以鍵值對（key-value pairs）的清單呈現。

<dl>
  <dt>Name</dt>
  <dd>Godzilla</dd>
  <dt>Born</dt>
  <dd>1952</dd>
  <dt>Birthplace</dt>
  <dd>Japan</dd>
  <dt>Color</dt>
  <dd>Green</dd>
</dl>

一組描述中可以有多個<dt>或多個<dd>

在描述清單中，由<dt>與<dd>搭配而成的一組描述，可以同時存在多個<dt>或多個<dd>，以處理同義或多義等情況。

一個<dt>對應多個<dd>

如果一組描述由一個<dt>跟多個<dd>組成，則表示這個<dt>同時有多個定義、描述等。

在以下由MDN提供的範例中，則在表示Firefox這個詞彙的<dt>後面放入兩個<dd>，分別代表Firefox的兩種意思。

<dl>
  <dt>Firefox</dt>
  <dd>
    A free, open source, cross-platform, graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers.
  </dd>
  <dd>
    The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a
    mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long).
  </dd>

  <!-- Other terms and descriptions -->
</dl>

在另一個由規範提供的範例中，則在表示作者的<dt>後面放了兩個<dt>，分別代表John跟Luke。表示同時有兩個作者的情形。

<dl>
 <dt> Authors
 <dd> John
 <dd> Luke
 <dt> Editor
 <dd> Frank
</dl>

多個<dt>對應一個<dd>

如果一組描述由多個<dt>跟一個<dd>組成，則表示這些<dt>有一樣的描述、定義或回答。

以下由規範提供的範例，便在一組描述中同時放入兩個<dt>，分別代表美國跟英國對同一個單字的不同拼法（color跟colour）。在這兩個<dt>後面的<dt>則說明這個單字的意思。

<dl>
 <dt lang="en-US"> <dfn>color</dfn> </dt>
 <dt lang="en-GB"> <dfn>colour</dfn> </dt>
 <dd> A sensation which (in humans) derives from the ability of
 the fine structure of the eye to distinguish three differently
 filtered analyses of a view. </dd>
</dl>

多個<dt>對應多個<dd>

如果一組描述由多個<dt>跟多個<dd>組成，則表示這些<dt>指的是同一種東西，只是寫法或問法等不同而已。而他們代表的東西，有多個意思或描述等。

以下的範例，便在一組描述中同時放入兩個<dt>跟兩個<dd>。<dt>表示同一個單字的不同拼法（realize跟realise），而這個單字本身又同時有多種由<dt>代表的涵義。

<dl>
  <dt>realize</dt>
  <dt>realise</dt>
  <dd>to understand a situation, sometimes suddenly.</dd>
  <dd>to achieve something you were hoping for.</dd>
  <dd>to be sold for a particular amount of money.</dd>
</dl>

小結

今天我們介紹了HTML中的三種清單，分別是無序清單、有序清單跟描述清單。

無序清單跟有序清單中的項目都是用li元素來表示，但無序清單需要以ul元素包住這些li。相對的，有序清單是用ol元素來裝。

至於描述清單，則跟前面兩種清單不太一樣。通常就只有元素內容本身的文字，沒有額外的符號或編號。

而且描述清單也不是以li代表項目，而是由<dl>、<dt>跟<dd>這三種元素構成。分別代表描述清單本身、要解釋或描述的詞彙或問題等，以及關於詞彙或問題等的定義跟描述。

參考資料

[1]: MDN, <ul>: The Unordered List element
[2]: MDN, <ol>: The Ordered List element - HTML | MDN
[3]: MDN, <li>: The List Item element
[4]: MDN, <dl>: The Description List element
[5]: MDN, <dt>: The Description Term element
[6]: MDN, <dd>: The Description Details element